<template>
  <pagination-table
    ref="treeins"
    size="medium"
    border="none"
    :paged="false"
    :row-config="{ keyField: valueKey, isHover: true }"
    :column-config="{ resizable: false }"
    :show-tools="false"
    :tree-config="treeConfig"
    :show-header="showHead"
    :load="loadTree"
    :after-loaded-table="loadedTree"
    @cell-click="handleClick"
  >
    <template v-if="showHead">
      <tree-column
        :field="labelKey"
        :row-field="valueKey"
        :class-name="treeColumnClass"
      >
        <template #default="{ row }">
          {{ row[labelKey] }}
        </template>
      </tree-column>
    </template>
    <template v-else>
      <vxe-column tree-node :field="labelKey" :class-name="treeColumnClass">
        <template #default="{ row }">
          {{ row[labelKey] }}
        </template>
      </vxe-column>
    </template>
  </pagination-table>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { computed } from 'vue';
  import { type VxeTablePropTypes } from 'vxe-table';

  const props = withDefaults(
    defineProps<{
      showHead?: boolean;
      labelKey?: string;
      valueKey?: string;
      childrenKey?: string;
      parentKey?: string;
      treeData?: any[];
      load?: () => Promise<any[]>;
      remote?: boolean;
      transform?: boolean;
    }>(),
    {
      showHead: true,
      labelKey: 'label',
      valueKey: 'id',
      childrenKey: 'children',
      parentKey: 'parentId',
      treeData: () => [],
      load: undefined,
      remote: false,
      transform: true
    }
  );

  const emits = defineEmits<{
    (event: 'change', id: any): void;
  }>();

  const treeConfig = computed<VxeTablePropTypes.TreeConfig>(() => {
    return {
      expandAll: true,
      transform: props.transform,
      rowField: props.valueKey,
      parentField: props.parentKey,
      childrenField: props.childrenKey
    };
  });

  const treeins = ref<PagenationTableInstance>();

  const actived = ref();

  const treeColumnClass = ({ row }: any) => {
    return row[props.valueKey] == actived.value
      ? 'tree-nav-cell-actived'
      : 'tree-nav-cell';
  };

  const loadTree: loadPaginationRequest = async () => {
    if (props.remote) {
      if (!props.load) throw new Error('need load function');
      const response = await props.load();
      return Promise.resolve({ dataList: response });
    } else {
      return Promise.resolve({ dataList: props.treeData });
    }
  };

  const loadedTree = async () => {
    const data = treeins.value?.getTableData();
    if (!data || data.length == 0) return Promise.resolve();
    actived.value = (data[0] as any)[props.valueKey];
    if (!props.showHead) {
      treeins.value?.getTableInstance()?.setAllTreeExpand(true);
    }
    emits('change', actived.value);
  };

  const handleClick = ({ row }: any) => {
    if (actived.value == row[props.valueKey]) return;
    actived.value = row[props.valueKey];
    emits('change', row[props.valueKey]);
  };
</script>

<style lang="less">
  @keyframes cell-actived {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }
  .tree-nav-cell-actived {
    color: var(--el-color-primary);
    cursor: pointer;
    position: relative;
    &::after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      background-color: var(--el-color-primary-light-8);
      opacity: 0.8;
      z-index: 1;
      animation: cell-actived ease-in-out 200ms forwards;
    }
    div {
      z-index: 2;
    }
  }
  .tree-nav-cell {
    cursor: pointer;
  }
</style>
